<template>
	<div class="echarts">
		<div class="details">
			<div class="echartsDom">
				<div class="pieEchartsDomTitle"><span>首页模块数据</span></div>
				<barLine :eventModuleStats="getStatPageData.eventModuleStats" />
			</div>
			<div class="echartsDom">
				<div class="pieEchartsDomTitle"><span>短剧模块数据</span></div>
				<population :appStartStats="getStatPageData.eventModuleStats" />
			</div>
			<div class="echartsDom">
				<div class="pieEchartsDomTitle"><span>文章模块数据</span></div>
				<barLineTow :eventModuleStats="getStatPageData.eventModuleStats" />
			</div>
		</div>
		<div class="details">
			<div class="echartsDom">
				<div class="pieEchartsDomTitle"><span>短视频模块数据</span></div>
				<barLine :eventModuleStats="getStatPageData.eventModuleStats" />
			</div>
			<div class="echartsDom">
				<div class="pieEchartsDomTitle"><span>小说模块数据</span></div>
				<population :appStartStats="getStatPageData.appStartStats" />
			</div>
			<div class="echartsDom">
				<div class="pieEchartsDomTitle"><span>直播模块数据</span></div>
				<barLineTow :eventModuleStats="getStatPageData.eventModuleStats" />
			</div>
		</div>
		<div class="details">
			<div class="echartsDom">
				<div class="pieEchartsDomTitle"><span>AI模块数据</span></div>
				<barLine :eventModuleStats="getStatPageData.eventModuleStats" />
			</div>
			<div class="echartsDom">
				<div class="pieEchartsDomTitle"><span>我的模块数据</span></div>
				<population :appStartStats="getStatPageData.appStartStats" />
			</div>
			<div class="echartsDom">
				<div class="pieEchartsDomTitle"><span>XX模块数据</span></div>
				<!-- <barLineTow :eventModuleStats="getStatPageData.eventModuleStats" /> -->
			</div>
		</div>
	</div>
</template>

<script>
import category from './components/category.vue';
import barLine from './components/barLine.vue';
import barLineTow from './components/barLineTow.vue';
import barLineThree from './components/barLineThree.vue';
import population from './components/population.vue';
import screenfull from 'screenfull';
import countTo from '/@/components/countTo/vue-countTo.vue';
import { getStatPage } from '/@/api/admin/dataAnalysis';

export default {
	components: {
		countTo,
		barLine,
		barLineTow,
		barLineThree,
		population,
		category,
	},
	props: {
		getStatPageData: {
			type: Object,
		},
	},
	created() {},
	mounted() {},
	data() {
		return {};
	},
	methods: {},
};
</script>
<style scoped lang="scss">
$win-width: 100%;
$win-height: 100%;
$win-width-vh: 100vh;
$win-width-vw: 100vw;
$echarts-h5: 68px;

.echartsDom {
	width: 33%;
	height: 100%;
	background-image: url('./images/eb.png');
	background-size: 100% 100%;
	padding: 0 0%;
	position: relative;

	.pieEchartsDomTitle {
		width: 100%;
		height: 16%;
		margin: auto;
		color: #def0ff;
		text-align: center;
		font-size: calc($win-width-vw * 0.05 / 6);
		left: 0;
		top: 1%;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 0;
	}
}
.details {
	width: $win-width;
	height: 32%;
	display: flex;
	align-items: left;
	justify-content: space-between;
	.echartsDom {
		width: 32%;
	}
}
</style>
